/*空气质量分析页面样式
 * 2016-04-19
 * by shihanbing 1085332235@qq.com
 */
header{
    width: 100%;
    height: 2.3rem;
    position: relative;
    text-align: center;
    background-color: #22ad3a;
    display: block;
    .title{
        color: #ffffff;
        font-size: 1rem;
    }
}
.wuranwu-wrap{
    padding: 0.5rem 0.4rem;
    position: relative;
    .wr-title{
        position: relative;
        padding-left: 0.4rem;
        font-size: 0.8rem;
        font-weight: 400;
        margin-bottom: 0.4rem;
        &:before{
            position: absolute;
            display: block;
            content: '';
            width: 0.2rem;
            height: 0.8rem;
            left: 0;
            top: 50%;
            margin-top: -0.4rem;
            background: #22ad3a;
        }
    }
    .wr-label{
        overflow: hidden;
        margin-bottom: 0.4rem;
        .wr-monthline{
            border: 1px solid #22ad3a;
            span{
                text-align: center;
                font-size: 0.7rem;
                padding: 0.4rem;
                cursor: pointer;
                &.active{
                    color: #FFFFFF;
                    background: #22ad3a;
                }
                &.noneclick{
                    cursor: auto;
                }
            }
            &.sec{
                border-top: 0;
            }
        }
    }
    .wr-chat{
        overflow: hidden;
        position: relative;
        .wr-chat-item{
            float: left;
            width: 100%;
            height: 10rem;
            &.u-bd-bt{
                height: 9em;
                margin-bottom: 1rem;
                border-bottom: 1px solid #ddd;
            }
        }
        .wr-zhibiao-control{
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            .zhibiao-item{
                text-align: center;
                background: #eee;
                font-size: 0.8rem;
                padding: 0.2rem;
                border: 1px solid #999;
                color: #999;
                border-radius: 0.2rem;
                margin: 0 0.1rem;
                cursor: pointer;
                sub{
                    vertical-align: sub;
                    font-size: 0.6rem;
                }
            }
            .active{
                background: #fff;
            }
            .color-aqi.active{
              border-color: #FE9A01;
              color: #FE9A01;
            }
            .color-pm25.active{
              border-color: #00E3D8;
              color: #00E3D8;
            }
            .color-so2.active{
              border-color: #e4b503;
              color: #e4b503;
            }
            .color-no2.active{
              border-color: #688ff4;
              color: #688ff4;
            }
            .color-pm10.active{
              border-color: #23ae39;
              color: #23ae39;
            }
            .color-co.active{
              border-color: #e16f6e;
              color: #e16f6e;
            }
            .color-o3.active{
              border-color: #01b3d9;
              color: #01b3d9;
            }
        }
    }
    .wr-select{
        position: absolute;
        right: 1.2rem;
        top: 0.25rem;
        select{
            outline: none;
            border: 1px solid #23AE39;
            border-radius: 0.15rem;
            background: none;
            font-size: 0.4rem;
            line-height: 0.4rem;
        }
    }
}
.wr-air-score{
    background: #22ad3a;
    color: #FFFFFF;
    border-radius: 0.25rem;
    text-align: center;
    font-size: 0.7rem;
    padding: 0.4rem;
    cursor: pointer;
    &:first-child{
        margin-right: 0.5rem;
    }
    &:last-child{
        margin-left: 0.5rem;
    }
}
#wrchat-airquality{
    width: 100%;
    height: 14rem;
}
#wrchat-factoryout{
    width: 100%;
    height: 14rem;
}
#wrchat-onetimeair{
    width: 100%;
    height: 9rem;
    position: relative;
}

.icon-liuliangxinxishangbao{
    font-size: 14px;
    line-height: 16px;
}
